<template>
	<view class="house-book-bar-wrapper">
		<view class="house-book-bar">
			<view class="bar-content">
				<!-- 左侧：咨询 -->
				<view class="section contact-section" @tap="onContactHost">
					<image class="host-avatar" src="https://i.ibb.co/TMmxh5LD/image.png" mode="aspectFill"></image>
					<text class="contact-label">咨询</text>
				</view>

				<!-- 中间区域 -->
				<view class="section details-section">
					<view class="price-container">
						<text class="price-symbol">¥</text>
						<text class="price-value">{{ price }}</text>
					</view>
					<!-- 日期容器，点击这里触发弹窗 -->
					<view class="date-container" @tap="showDatePicker">
						<view class="night-count" v-if="nightCount > 0">共{{ nightCount }}晚</view>
						<!-- "隐身"的日期选择器，功能正常但视觉上不可见 -->
						<uni-datetime-picker ref="datePicker" type="daterange" :start="startDate" :end="endDate"
							:value="[formatFullDate(checkInDate), formatFullDate(checkOutDate)]" @change="onDateChange"
							:clear-icon="false" format="MM月DD日" :border="false" :insert="false" />
					</view>
				</view>

				<!-- 右侧：预订按钮 -->
				<view class="section book-section">
					<view class="book-button" @tap="onBookNow">
						<text class="button-text">立即预订</text>
					</view>
				</view>
			</view>

			<!-- 底部安全区域 -->
			<view class="safe-area-bottom"></view>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'houseBookBar',
		props: {
			checkInDate: {
				type: String,
				default: ''
			},
			checkOutDate: {
				type: String,
				default: ''
			},
			price: {
				type: [Number, String],
				default: ''
			}
		},
		data() {
			return {
				// 修复：日期选择器需要完整的 YYYY-MM-DD 格式
				startDate: '2025-01-01',
				endDate: '2026-12-31'
			}
		},
		computed: {
			nightCount() {
				if (!this.checkInDate || !this.checkOutDate) return 0;
				
				// 直接使用完整的日期格式创建Date对象
				let start = new Date(this.checkInDate);
				let end = new Date(this.checkOutDate);

				const diffTime = end.getTime() - start.getTime();
				const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24));

				return diffDays > 0 ? diffDays : 0;
			}
		},
		mounted() {
			this.$nextTick(() => {
				const picker = this.$refs.datePicker;
				if (picker && picker.$el) {
					const el = picker.$el;
					// 通过JS直接修改样式，实现"隐身"，避免小程序中复杂的样式穿透问题
					Object.assign(el.style, {
						position: 'absolute',
						top: '0',
						left: '0',
						width: '100%',
						height: '100%',
						opacity: '0',
						pointerEvents: 'none'
					});
				}
			});
		},
		methods: {
			onBookNow() {
				this.$emit('book-now');
			},
			onContactHost() {
				this.$emit('contact-host');
			},
			showDatePicker() {
				this.$refs.datePicker.open();
			},
			onDateChange(e) {
				if (e && Array.isArray(e) && e.length === 2) {
					const [startDate, endDate] = e;
					const start = new Date(startDate);
					const end = new Date(endDate);
					
					// 格式化为完整的YYYY-MM-DD格式
					const startFormatted = `${start.getFullYear()}-${String(start.getMonth() + 1).padStart(2, '0')}-${String(start.getDate()).padStart(2, '0')}`;
					const endFormatted = `${end.getFullYear()}-${String(end.getMonth() + 1).padStart(2, '0')}-${String(end.getDate()).padStart(2, '0')}`;
					
					this.$emit('date-change', {
						startDate: startFormatted,
						endDate: endFormatted,
						rawDates: e
					});
				}
			},
			formatFullDate(dateString) {
				if (!dateString) return '';
				
				// 如果已经是完整的YYYY-MM-DD格式，直接返回
				if (dateString.match(/^\d{4}-\d{2}-\d{2}$/)) {
					return dateString;
				}
				
				// 兼容旧的MM-DD格式
				const currentYear = new Date().getFullYear();
				const [month, day] = dateString.split('-');
				const checkDate = new Date(`${currentYear}-${month}-${day}`);
				const today = new Date();
				today.setHours(0, 0, 0, 0);
				if (checkDate < today && month === '01') {
					return `${currentYear+1}-${month}-${day}`;
				}
				return `${currentYear}-${month}-${day}`;
			}
		}
	}
</script>
<!-- // +----------------------------------------------------------------------
// | panweidongAI编程开发者  
// +----------------------------------------------------------------------
// | 联系379247101@qq.com   公司：AI技术部
// +----------------------------------------------------------------------
// | Author: panweidong <379247101@qq.com>
// +---------------------------------------------------------------------- -->

<style lang="scss" scoped>
	.house-book-bar-wrapper {
		width: 100%;
		position: fixed;
		bottom: 0;
		left: 0;
		z-index: 100;
	}

	.house-book-bar {
		background-color: #ffffff;
		border-top: 1px solid #f0f0f0;
		box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.06);
	}

	.bar-content {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 20rpx;
		height: 120rpx;
	}

	.section {
		display: flex;
		align-items: center;
		height: 100%;
	}

	// 左侧：咨询
	.contact-section {
		flex-direction: column;
		justify-content: center;
		align-items: center;
		min-width: 100rpx;
		cursor: pointer;
		padding: 0 10rpx;

		.host-avatar {
			width: 50rpx;
			height: 50rpx;
			border-radius: 50%;
			margin-bottom: 8rpx;
		}

		.contact-label {
			font-size: 22rpx;
			color: #666;
		}
	}

	// 中间区域
	.details-section {
		flex: 1;
		flex-direction: row;
		justify-content: flex-start;
		align-items: center;
		margin: 0 20rpx;
		overflow: hidden;

		.price-container {
			display: flex;
			align-items: center;
			color: #ff6034;
			line-height: 1;

			.price-symbol {
				font-size: 24rpx;
				font-weight: bold;
				margin-right: 4rpx;
			}

			.price-value {
				font-size: 40rpx;
				font-weight: bold;
			}
		}

		.date-container {
			display: flex;
			align-items: center;
			margin-left: 24rpx;
			cursor: pointer;
			position: relative;

			.night-count {
				font-size: 20rpx;
				color: #999;
				background-color: #f5f5f5;
				padding: 2rpx 8rpx;
				border-radius: 4rpx;
				white-space: nowrap;
			}
		}
	}

	// 右侧：预订按钮
	.book-section {
		.book-button {
			display: flex;
			justify-content: center;
			align-items: center;
			background: linear-gradient(to right, #ff8a64, #ff6034);
			border-radius: 40rpx;
			padding: 0 40rpx;
			height: 80rpx;
			box-shadow: 0 4rpx 10rpx rgba(255, 96, 52, 0.3);
			cursor: pointer;
			transition: all 0.2s ease-in-out;

			&:active {
				transform: scale(0.98);
				opacity: 0.9;
			}

			.button-text {
				color: #ffffff;
				font-size: 30rpx;
				font-weight: bold;
				white-space: nowrap;
			}
		}
	}

	.safe-area-bottom {
		height: env(safe-area-inset-bottom);
	}

	/* 覆盖日期选择器样式 */
	:deep(.uni-datetime-picker) {
		.uni-datetime-picker-container {
			border-radius: 24rpx;
			overflow: hidden;
		}

		.uni-datetime-picker-btn {
			padding: 20rpx;
			font-size: 32rpx;
		}

		.uni-datetime-picker-btn-text {
			font-size: 32rpx;
		}

		.uni-calendar-item__weeks-box {
			font-size: 30rpx;
		}

		.uni-calendar-item--checked {
			background-color: #ff6034;
		}

		.uni-calendar-item--checked-range-text {
			color: #ff6034;
		}

		.uni-calendar-item--checked-range {
			background-color: rgba(255, 96, 52, 0.1);
		}
	}
</style>